<template>
    <label>当前用户信息</label>
   <div class="top">
    
    <el-table :data="tableData" style="width: 95%" :show-header="false">
      <el-table-column label="当前用户信息" width="485">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">账号</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" width="550">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            :disabled="isPopoverDisabled(scope.row)"
          >
            <template #reference>
              <el-tag>{{ scope.row.account }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="tableData" style="width: 95%" :show-header="false">
      <el-table-column label="当前用户信息" width="485">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">昵称</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" width="550">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            :disabled="isPopoverDisabled(scope.row)"
          >
            <template #reference>
              <el-tag>{{ scope.row.nickName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="tableData" style="width: 95%" :show-header="false">
      <el-table-column label="当前用户信息" width="485">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">手机号码</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" width="550">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            :disabled="isPopoverDisabled(scope.row)"
          >
            <template #reference>
              <el-tag>{{ scope.row.phone }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="tableData" style="width: 95%" :show-header="false">
      <el-table-column label="当前用户信息" width="485">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">身份</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" width="550">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            :disabled="isPopoverDisabled(scope.row)"
          >
            <template #reference>
              <el-tag style="background-color: #A2E29E; border-color: #A2E29E">{{ scope.row.role }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
   
   </div>
   
   <label>管理员操作</label>
   <div class="bottom">
   
   <el-table :data="tableData02" style="width: 95%" :show-header="false">
     
    <el-table-column label="当前用户信息" width="346">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.nickName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="" width="346">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
            :disabled="isPopoverDisabled(scope.row)"
            class="buttom"
          >
            <template #reference>
              <el-tag style="background-color: #E06060; border-color: #EFB7B7" >{{ scope.row.operate }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="当前用户信息" width="346">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.updatedata }}/{{ scope.row.updatetime }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
   </div>

  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { get_user_info ,getcaozuo } from '../../api/index';
  import { ElTable, ElTableColumn, ElPopover, ElTag, ElIcon } from 'element-plus';
  import { Timer } from '@element-plus/icons-vue';
  import api from '../../api/request'

  
  interface User {
    account: string;
    nickName: string;
    phone: string;
    role: string;
    img: string;
  }
  onMounted(async() => {
   let id = localStorage.getItem('TOKEN')
   await get_user_info({id}).then(res=>{
    // console.log(res);
    let {code,result} = res
    if(code == 200){
        let arr = result.map((item: any) => {
            if(item.role==1){
                item.role='管理员'
            }
            if(item.role==0){
                item.role='超级管理员'
            }
            return {
                account: item.account,
                nickName: item.nickName,
                phone: item.phone,
                role:item.role,
                img:api.url+item.user_img
            };
        });
        tableData.value= arr
        // console.log(tableData);
    }
   })
   await  getcaozuo().then(res=>{
    let {code,result} = res
    if(code == 200){
    //    console.log(result);
       let Arr = result.map((item: any) => {
            return {
                nickName : item.nickName,
                operate: item.operate,
                updatedata: item.updatedata.slice(0, 10) ,
                updatetime: item.updatetime
            };
        });
        tableData02.value = Arr 
        console.log(Arr);
    }
   })
  });
  
  const tableData02 = ref<any>([
  
  ])
  const tableData = ref<User[]>([
    {
        account: '',
        nickName: '',
        phone: '',
        role:'',
        img:'',
    }
  ]);
  
  const isPopoverDisabled = (row: User) => {
    // 根据条件返回 true 或 false
    // 例如，如果 name 是 'Tom'，则禁用弹出框
    return true;
  };
  </script>
  
  

  
<style scoped lang="less">
.top{
    margin-top: 30px;
    margin-bottom: 40px;
}
.bottom{
    margin-top: 20px;
}
.el-tag.el-tag--primary {
    --el-tag-text-color: var(--el-color-black);
    img{
        width: 40px;
        height: 50px;
    }
}
.el-table__header-wrapper{
    display: none !important
}
</style>